@use '@scss/common' as *;

.wrap {
  overflow: auto;
  margin-bottom: 2rem;

  @include mid-break {
    margin: 0 1px;
  }

  :global {
    table {
      margin-bottom: 1rem;
      overflow: auto;
      max-width: 100%;
      width: 100%;
      border-spacing: 0px;
      border-collapse: collapse;

      thead {
        color: var(--theme-elevation-500);

        th {
          @include small;
          & {
            font-weight: normal;
            text-align: left;
          }
        }
      }

      th,
      td {
        padding: 0.75rem;
        min-width: 150px;
        vertical-align: top;
        max-width: 1000px;
        margin: auto;

        &:first-child {
          padding-left: 1.5rem;
        }

        &:last-child {
          padding-right: 1.5rem;
        }

        @include mid-break {
          &:first-child {
            padding-left: 1rem;
          }

          &:last-child {
            padding-right: 1rem;
          }
        }
      }

      tbody {
        tr {
          &:nth-child(odd) {
            position: relative;
            background: var(--theme-elevation-100);
          }
        }
      }

      @include mid-break {
        th,
        td {
          padding: 1rem 0.5rem;
        }
      }
    }
  }
}
